<template>
  <div class>
    <el-card class="btns">
      <el-button size="medium" type="primary" @click="submitForm('ruleForm')">查询</el-button>
      <el-button size="medium" @click="resetForm('ruleForm')">重置</el-button>
      <el-button size="medium" type="primary" icon="el-icon-plus" @click="showDialog">添加</el-button>
    </el-card>
    <el-card style="position:relative;">
      <el-form
        :style="style"
        :model="ruleForm"
        ref="ruleForm"
        inline
        label-width="100px"
        class="demo-ruleForm">
        <div class="icon-arrow" v-if="folding">
          <i @click="offForm=!offForm"
            :title="offForm?'展开表单':'收起表单'"
            :class="offForm?'el-icon-arrow-down':'el-icon-arrow-up'"></i>
        </div>
			                	<el-form-item label="条件sql"  prop="dataSql">
		                	<el-input v-model="ruleForm.dataSql"></el-input>
		              </el-form-item>
	                	<el-form-item label="条件描述"  prop="dataSqlDesc">
		                	<el-input v-model="ruleForm.dataSqlDesc"></el-input>
		              </el-form-item>
	                	<el-form-item label="允许读"  prop="dataSearch">
		                	<el-input v-model="ruleForm.dataSearch"></el-input>
		              </el-form-item>
	                	<el-form-item label="允许编辑"  prop="dataEdit">
		                	<el-input v-model="ruleForm.dataEdit"></el-input>
		              </el-form-item>
	                	<el-form-item label="允许删除"  prop="dataDelete">
		                	<el-input v-model="ruleForm.dataDelete"></el-input>
		              </el-form-item>
	                	<el-form-item label="创建人ID"  prop="createUserId">
		                	<el-input v-model="ruleForm.createUserId"></el-input>
		              </el-form-item>
	                	<el-form-item label="创建人姓名"  prop="createUserName">
		                	<el-input v-model="ruleForm.createUserName"></el-input>
		              </el-form-item>
	                	<el-form-item label="查看全部"  prop="dataAll">
		                	<el-input v-model="ruleForm.dataAll"></el-input>
		              </el-form-item>
	                	<el-form-item label="用户"  prop="userName">
		                	<el-input v-model="ruleForm.userName"></el-input>
		              </el-form-item>
      </el-form>
    </el-card>
    <el-table stripe :data="tableData" border style="width: 100%">
    		<el-table-column type="index" width="60px" align="center" fixed="left" label="序号"></el-table-column>
        <el-table-column align="center" label="用户">
          <template slot-scope="scope">
                 <span>{{scope.row.userName}}</span>
          </template>
          </el-table-column>              
        <el-table-column align="center" label="条件sql" width="300px">
	                <template slot-scope="scope">
	                     	<span>{{scope.row.dataSql}}</span>
	                </template>
	            		</el-table-column>
                    	<el-table-column align="center" label="允许读">
	                <template slot-scope="scope">
	                     	<span>{{scope.row.dataSearch}}</span>
	                </template>
	            		</el-table-column>
                    	<el-table-column align="center" label="允许编辑">
	                <template slot-scope="scope">
	                     	<span>{{scope.row.dataEdit}}</span>
	                </template>
	            		</el-table-column>
                    	<el-table-column align="center" label="允许删除">
	                <template slot-scope="scope">
	                     	<span>{{scope.row.dataDelete}}</span>
	                </template>
                  </el-table-column>
                  <el-table-column align="center" label="条件描述">
                      <template slot-scope="scope">
                             <span>{{scope.row.dataSqlDesc}}</span>
                      </template>
                      </el-table-column>
                    	<!-- <el-table-column align="center" label="创建人ID">
	                <template slot-scope="scope">
	                     	<span>{{scope.row.createUserId}}</span>
	                </template>
	            		</el-table-column> -->
                    	<el-table-column align="center" label="创建人姓名">
	                <template slot-scope="scope">
	                     	<span>{{scope.row.createUserName}}</span>
	                </template>
	            		</el-table-column>
                    	<el-table-column align="center" label="创建日期">
	                <template slot-scope="scope">
	                    	<span>{{new Date(scope.row.createTime).toLocaleString()}}</span>
	                </template>
	            		</el-table-column>
                    	<el-table-column align="center" label="修改日期">
	                <template slot-scope="scope">
	                    	<span>{{scope.row.updateTime==null?'':new Date(scope.row.updateTime).toLocaleString()}}</span>
	                </template>
	            		</el-table-column>
                    	<el-table-column align="center" label="查看全部">
	                <template slot-scope="scope">
	                     	<span>{{scope.row.dataAll}}</span>
	                </template>
	            		</el-table-column>
       <el-table-column label="操作" width="180px" fixed="right" align="center">
        <template slot-scope="scope">
          <el-button size="mini" @click="showEditDialog(scope.$index, scope.row)">编辑</el-button>
          <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-card style="text-align:right;">
      <el-pagination
        @size-change="sizeChange"
        @current-change="currentChange"
        :current-page="currentPage"
        :page-sizes="[ 10, 20,30, 40]"
        :page-size="pageSize"
        background
        layout="total, sizes, prev, pager, next"
        :total="total"
      ></el-pagination>
    </el-card>
    <!-- --------------------------------------------------------添加弹出框 -->
    <el-dialog title="新增管理" :visible.sync="dialogFormVisible" :close-on-click-modal="false">
      <el-form :model="form" ref="addForm" :rules="rules">
               <el-form-item label="读写权限" :label-width="formLabelWidth">
                  <template>
                      <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
                      <div style="margin: 15px 0;"></div>
                      <el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
                        <el-checkbox v-for="city in cities" :label="city.key" :key="city.key">{{city.name}}</el-checkbox>
                      </el-checkbox-group>
                    </template>
              </el-form-item>
                	<el-form-item label="查看全部" :label-width="formLabelWidth">
                   <el-switch
                   @change="changeShow"
                    v-model="switchValue"
                    active-text="是"
                    inactive-text="否"
                    active-value="1"
                    inactive-value="0">
                  </el-switch>
	             </el-form-item>
                  <el-form-item label="用户" :label-width="formLabelWidth" prop="userId">
                <el-select v-model="form.userId" :label-width="formLabelWidth" placeholder="请选择">
                <el-option
                  v-for="item in users"
                  :key="item.id"
                  :label="item.realName"
                  :value="item.id">
                </el-option>
              </el-select> 
            </el-form-item>
            <el-form-item label="组织机构" :label-width="formLabelWidth" v-show="showOrHidden">
                <!-- <el-cascader
                  change-on-select
                  :options="options"
                  :props="cascaderProps"
                  v-model="form.organCode"
                ></el-cascader> -->
                <zzjg @change="getPremLevel" parentDialog></zzjg>
              </el-form-item>
            <el-form-item label="条件描述" :label-width="formLabelWidth" prop="dataSqlDesc">
                <el-input v-model="form.dataSqlDesc" autocomplete="off"></el-input>
            </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleAdd()">确 定</el-button>
      </div>
    </el-dialog>
    <!-- --------------------------------------------------------编辑弹出框 -->
    <el-dialog title="编辑管理" :visible.sync="dialogEditVisible" :close-on-click-modal="false">
      <el-form :model="editForm" ref="editForm" :rules="rules">
                	<el-form-item label="条件sql" :label-width="formLabelWidth" prop="dataSql">
                 	<el-input v-model="editForm.dataSql" autocomplete="off"></el-input>
	              </el-form-item>
                	<el-form-item label="条件描述" :label-width="formLabelWidth" prop="dataSqlDesc">
                 	<el-input v-model="editForm.dataSqlDesc" autocomplete="off"></el-input>
	              </el-form-item>
                	<el-form-item label="允许读" :label-width="formLabelWidth" prop="dataSearch">
                 	<el-input v-model="editForm.dataSearch" autocomplete="off"></el-input>
	              </el-form-item>
                	<el-form-item label="允许编辑" :label-width="formLabelWidth" prop="dataEdit">
                 	<el-input v-model="editForm.dataEdit" autocomplete="off"></el-input>
	              </el-form-item>
                	<el-form-item label="允许删除" :label-width="formLabelWidth" prop="dataDelete">
                 	<el-input v-model="editForm.dataDelete" autocomplete="off"></el-input>
	              </el-form-item>
                	<el-form-item label="创建人ID" :label-width="formLabelWidth" prop="createUserId">
                 	<el-input v-model="editForm.createUserId" autocomplete="off"></el-input>
	              </el-form-item>
                	<el-form-item label="创建人姓名" :label-width="formLabelWidth" prop="createUserName">
                 	<el-input v-model="editForm.createUserName" autocomplete="off"></el-input>
	              </el-form-item>
                	<el-form-item label="创建日期" :label-width="formLabelWidth" prop="createTime">
                	<el-date-picker
                      v-model="editForm.createTime"
                      type="datetime"
                      format="yyyy-MM-dd HH:mm:ss"
                      placeholder="选择日期时间">
                    </el-date-picker>
	              </el-form-item>
                	<el-form-item label="修改日期" :label-width="formLabelWidth" prop="updateTime">
                	<el-date-picker
                      v-model="editForm.updateTime"
                      type="datetime"
                      format="yyyy-MM-dd HH:mm:ss"
                      placeholder="选择日期时间">
                    </el-date-picker>
	              </el-form-item>
                	<el-form-item label="查看全部" :label-width="formLabelWidth" prop="dataAll">
                 	<el-input v-model="editForm.dataAll" autocomplete="off"></el-input>
	              </el-form-item>
                	<el-form-item label="用户" :label-width="formLabelWidth" prop="userId">
                 	<el-input v-model="editForm.userId" autocomplete="off"></el-input>
	              </el-form-item>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogEditVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleEdit()">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  const cityOptions = ["dataSearch","dataEdit","dataDelete"];
  import zzjg from "@/components/zzjg"
export default {
  components: {zzjg},
  data() {
    return {
      organCodes:[],
      username:'',
      // options: [],
      showOrHidden:true,
      // cascaderProps: {
      //   value: "organCode",
      //   label: "organName",
      //   children: "children"
      // },
      switchValue:'0',
      checkAll: false,
        checkedCities: ["dataSearch"],
        cities: [{key:"dataSearch",name:"允许读"},{key:"dataEdit",name:"允许编辑"},{key:"dataDelete",name:"允许删除"}],
        isIndeterminate: true,
      users:[],
      dialogFormVisible: false,
      dialogEditVisible: false,
      offForm: true, //是否折叠
      folding: false, //表单是否超过一行
      formLabelWidth: "80px",
      tableData: [],
      total: 0,
      pageSize: 10,
      currentPage: 1,
      ruleForm: {
             			dataSql:'',
             			dataSqlDesc:'',
             			dataSearch:'',
             			dataEdit:'',
             			dataDelete:'',
             			createUserId:'',
             			createUserName:'',
             			dataAll:'',
                   userId:'',
                   userName:'',
      },
      style: {},
      rules: {
       
      },
      form: {
             			dataSql:'',
             			dataSqlDesc:'',
             			dataSearch:'',
             			dataEdit:'',
             			dataDelete:'',
             			createUserId:'',
             			createUserName:'',
             			dataAll:'',
             			userId:'',
      },
      editForm: {
             	id:'',
             	dataSql:'',
             	dataSqlDesc:'',
             	dataSearch:'',
             	dataEdit:'',
             	dataDelete:'',
             	createUserId:'',
             	createUserName:'',
             	createTime:'',
             	updateTime:'',
             	dataAll:'',
             	userId:'',
      }
    };
  },

  mounted() {
    this.init();
    this.getusers();
    // this.getGlbOptions(); 
    this.changeShow();
    let formHeight = this.$refs.ruleForm.$el.clientHeight;
    if (formHeight > 62) {
      this.folding = true;
      this.style = {
        height: "62px",
        overflow: "hidden"
      };
    } else {
      this.folding = false;
      this.style = {
        height: "auto",
        overflow: "hidden"
      };
    }
  },
  computed: {
    
  },
  watch: {
    offForm: function(v) {
      if (v) {
        this.style = {
          height: "62px",
          overflow: "hidden"
        };
      } else {
        this.style = {
          height: "auto",
          overflow: "hidden"
        };
      }
    }
  },
  methods: {
    getPremLevel(val){
            if(val && val.length>0){
                for(var i=0;i<val.length;i++){
                  this.organCodes[i]=val[i].organCode;
                }
            }
          },
    changeShow(){
      if(this.switchValue=='1'){
        this.showOrHidden=false;
      }else{
        this.showOrHidden=true;
      }
    },
    // getGlbOptions() {
    //   this.$api
    //     .formPost( "/api/auth/sysorgan/doGetLayerOrgan",{}).then(res=>{
    //       if (res.retHead.code == "0000000") {
    //         this.options = res.retBody;
    //       }else {
    //             this.$message({
    //               message: "查询失败！",
    //               type: "error"
    //             });
    //           }
    //     });
      
    // },
    handleCheckAllChange(val) {
        this.checkedCities = val ? cityOptions : [];
        this.isIndeterminate = false;
      },
      handleCheckedCitiesChange(value) {
        let checkedCount = value.length;
        this.checkAll = checkedCount === this.cities.length;
        this.isIndeterminate = checkedCount > 0 && checkedCount < this.cities.length;
      },
    sizeChange(n) {
      this.pageSize = n;
      this.init();
    },
    currentChange(n) {
      this.currentPage = n;
      this.init();
    },
    init() {
      let params = {
        pageNum: this.currentPage,
        pageSize: this.pageSize,
        ...this.ruleForm
      };
      this.$api
        .formPost( "/api/biz/flow/projDataAuth/doGetList", params)
        .then(res => {
          if (res.retHead.code == "0000000") {
            this.tableData = res.retBody.list;
            this.total = res.retBody.total;
            this.currentPage = res.retBody.pageNum;
          }
        });
    },
    showDialog() {
      this.dialogFormVisible = true;
      this.form ={};
      this.organCodes=[];
    },
    showEditDialog(index, row) {
             		this.editForm.id=row.id;
             		this.editForm.dataSql=row.dataSql;
             		this.editForm.dataSqlDesc=row.dataSqlDesc;
             		this.editForm.dataSearch=row.dataSearch;
             		this.editForm.dataEdit=row.dataEdit;
             		this.editForm.dataDelete=row.dataDelete;
             		this.editForm.createUserId=row.createUserId;
             		this.editForm.createUserName=row.createUserName;
             		this.editForm.createTime=new Date(row.createTime);
             		this.editForm.updateTime=new Date(row.updateTime);
             		this.editForm.dataAll=row.dataAll;
             		this.editForm.userId=row.userId;
      this.dialogEditVisible = true;
    },
    handleAdd() {
      let user=JSON.parse(sessionStorage.getItem("user"));
      this.form.createUserId=user.id;
      this.form.createUserName=user.realName;
      this.form.dataAll=this.switchValue;
      this.form.organCode=this.organCodes;
      this.$api.formPost( "/api/auth/sysuser/doGetUser", {
        id:this.form.userId,
      }).then(res => {
          if (res.retHead.code == "0000000") {
              this.form.userName=res.retBody.username;
              if(this.checkedCities.length>0){
                for(var i=0;i<this.checkedCities.length;i++){
                  if(this.checkedCities[i]=="dataSearch"){
                    this.form.dataSearch="1";
                  }
                  if(this.checkedCities[i]=="dataEdit"){
                    this.form.dataEdit="1";
                  }
                  if(this.checkedCities[i]=="dataDelete"){
                    this.form.dataDelete="1";
                  }
                }
              }
              this.$refs.addForm.validate(valid => {
                if (valid) {
                  this.$api
                    .formPost( "/api/biz/flow/projDataAuth/doSave", this.form)
                    .then(res => {
                      if (res.retHead.code == "0000000") {
                        this.$message({
                          message: "添加成功！",
                          type: "success"
                        });
                        this.dialogFormVisible = false;
                        this.init();
                      } else {
                        this.$message({
                          message: res.retHead.message,
                          type: "error"
                        });
                      }
                    });
                }
              });
          }
      });
      
    },
    handleEdit() {
      this.$refs.editForm.validate(valid => {
        if (valid) {
          let params = this.editForm;
          this.$api
            .formPost( "/api/biz/flow/projDataAuth/doModById", params)
            .then(res => {
              if (res.retHead.code == "0000000") {
                this.$message.success("执行成功！");
                this.init();
                this.dialogEditVisible = false;
              } else {
                this.$message.error("执行失败！");
              }
            });
        }
      });
    },

    handleDelete(index, row) {
      this.$confirm("此操作将永久删除该项, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.$api
            .formPost( "/api/biz/flow/projDataAuth/doRmById", {
              id: row.id
            })
            .then(res => {
              if (res.retHead.code == "0000000") {
                this.$message({
                  message: "操作成功！",
                  type: "success"
                });
                this.init();
              } else {
                this.$message({
                  message: "操作失败！",
                  type: "error"
                });
              }
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    submitForm(formName) {
      this.init();
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    getusers() {
              let params = {};
              this.$api
                .formPost(  "/api/auth/sysuser/doGetList", params)
                .then(res => {
                  if (res.retHead.code == "0000000") {
                    this.users = res.retBody.list;
                  }
                });
            },
   getUserById(id){
    let params = {id:id};
              this.$api
                .formPost(  "/api/auth/sysuser/doGetUser", params)
                .then(res => {
                  if (res.retHead.code == "0000000") {
                    this.username=res.retBody.username;
                    console.log(this.username);
                  }
                });
            },
  },
  created() {}
};
</script>
<style lang='scss' scoped>
.btns {
  text-align: right;
}
.icon-arrow {
  position: absolute;
  bottom: 5px;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: #f1f1f1;
  i {
    background-color: #fff;
    position: absolute;
    color: #999;
    bottom: -7px;
    margin-left: 50%;
    transform: translateX(-50%);
    cursor: pointer;
  }
}
</style>